<template>
  <el-dialog
    width="664px"
    :show-close="false"
    center
    :visible.sync="dialogTableVisible"
    :close-on-click-modal="false"
    @opened="handleOpend"
    @closed="handleClosed"
  >
    <template #title><span class="text-[24px]">投资价值分析</span></template>

    <div class="">
      <div ref="chartDom" class="chart-box" />
    </div>
    <div class="analysis-text">{{ analysisText }}分析中...</div>
  </el-dialog>
</template>

<script lang="ts">
import Vue from 'vue'
import * as echarts from 'echarts'
const dataList = [
  { text: '区位价值度', key: 'key1' },
  { text: '产业活跃度', key: 'key2' },
  { text: '创新活跃度', key: 'key3' },
  { text: '成本友好性', key: 'key4' },
  { text: '发展特色度', key: 'key5' },
  { text: '政策支持度', key: 'key6' },
]

const options = {
  title: {},
  legend: {
    show: false,
  },
  radar: {
    // shape: 'circle',
    indicator: dataList,
    splitNumber: 4,
    axisName: {
      color: '#fff',
      backgroundColor: '#666',
      borderRadius: 3,
      padding: [3, 5],
    },
  },
  series: [
    {
      type: 'radar',
      areaStyle: {
        color: 'rgba(0,98,255,0.39)',
      },
      lineStyle: {
        color: 'rgba(0,98,255,0.6)',
      },
      itemStyle: {
        color: 'rgba(0,98,255,0.6)',
      },
      label: {
        show: false,

        position: 'insideBottom',
        color: '#FF355F',
        fontWeight: 'bold',
        fontSize: 16,
      },
      data: [
        {
          value: dataList.map(() => Math.floor(Math.random() * 100)),
        },
      ],
    },
    {
      type: 'radar',
      areaStyle: {
        color: 'rgba(146,60,223,0.45)',
      },
      lineStyle: {
        color: 'rgba(146,60,223,0.6)',
      },
      itemStyle: {
        color: 'rgba(146,60,223,0.6)',
      },
      label: {
        show: false,

        position: 'insideBottom',
        color: '#FF355F',
        fontWeight: 'bold',
        fontSize: 16,
        // formatter: function (params) {
        //   return params.value
        // },
      },
      data: [
        {
          value: dataList.map(() => Math.floor(Math.random() * 100)),
        },
      ],
    },
  ],
}
export default Vue.extend({
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return { myChart: null, time: 0, analysisText: '', step: 0.5 }
  },
  computed: {
    dialogTableVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      },
    },
  },
  watch: {
    dialogTableVisible(val) {
      if (!val) {
        this.$emit('end')
      }
    },
  },
  mounted() {},
  methods: {
    analysisProcess() {
      const { step } = this
      const dataList = [
        { text: '区位价值度', time: Math.random() * (step - 0.1) + step * 0 },
        { text: '产业活跃度', time: Math.random() * (step - 0.1) + step * 1 },
        { text: '创新活跃度', time: Math.random() * (step - 0.1) + step * 2 },
        { text: '成本友好性', time: Math.random() * (step - 0.1) + step * 3 },
        { text: '发展特色度', time: Math.random() * (step - 0.1) + step * 4 },
        { text: '政策支持度', time: Math.random() * (step - 0.1) + step * 5 },
        { text: 'close', time: Math.random() * (step - 0.1) + step * 6 },
      ]

      dataList.forEach((d) => {
        setTimeout(() => {
          if (d.text === 'close') {
            this.dialogTableVisible = false
            this.$emit('analysisend')
          } else {
            this.analysisText = d.text
          }
        }, d.time * 1000)
      })
    },
    handleOpend() {
      if (!process.client) return
      const myChart = (this.myChart = echarts.init(this.$refs.chartDom))

      myChart.setOption(options)

      setTimeout(() => {
        this.randomChart()
        this.analysisProcess()
      }, 200)
    },

    randomChart() {
      this.time = setInterval(() => {
        options.series[0].data[0].value = dataList.map(() => Math.floor(Math.random() * 100))
        options.series[1].data[0].value = dataList.map(() => Math.floor(Math.random() * 100))
        this.myChart.setOption(options)
      }, 1000)
    },

    handleClosed() {
      window.clearInterval(this.time)
    },
  },
})
</script>
<style lang="scss" scoped>
.chart-box {
  height: 300px;
}

.analysis-text {
  height: 40px;
  display: flex;
  justify-content: center;
  font-size: 18px;
  align-items: flex-end;
}
</style>
